<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Icons 图标库</div>
    </ons-toolbar>

    <div class="content-wrapper">
        <div class="info-box">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-star" class="info-box-icon"></ons-icon>
                <div>
                    <div class="info-box-title">Material Design 图标</div>
                    <div class="info-box-content">OnsenUI 内置了丰富的 Material Design 图标库</div>
                </div>
            </div>
        </div>

        <h3 class="section-title">常用图标</h3>
        <div class="example-container">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; text-align: center;">
                <div class="icon-item">
                    <ons-icon icon="md-home" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-home</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-search" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-search</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-settings" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-settings</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-account-circle" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-account-circle</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-notifications" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-notifications</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-favorite" size="32px" style="color: #e74c3c;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-favorite</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-star" size="32px" style="color: #f39c12;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-star</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-menu" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-menu</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-more-vert" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-more-vert</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-close" size="32px" style="color: #e74c3c;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-close</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-check" size="32px" style="color: #27ae60;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-check</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-plus" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-plus</div>
                </div>
            </div>
            <div class="code-section" onclick="toggleSectionCode('common-icons')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-common-icons"></ons-icon>
                </div>
                <div class="code-display-section" id="code-common-icons">
                    <pre><code>&lt;ons-icon icon="md-home" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-search" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-settings" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-account-circle" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-notifications" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-favorite" size="32px" style="color: #e74c3c;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-star" size="32px" style="color: #f39c12;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-menu" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-more-vert" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-close" size="32px" style="color: #e74c3c;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-check" size="32px" style="color: #27ae60;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-plus" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('common-icons')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <h3 class="section-title">导航图标</h3>
        <div class="example-container">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; text-align: center;">
                <div class="icon-item">
                    <ons-icon icon="md-arrow-back" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-arrow-back</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-arrow-forward" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-arrow-forward</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-chevron-left" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-chevron-left</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-chevron-right" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-chevron-right</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-chevron-down" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-chevron-down</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-chevron-up" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-chevron-up</div>
                </div>
            </div>
            <div class="code-section" onclick="toggleSectionCode('navigation-icons')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-navigation-icons"></ons-icon>
                </div>
                <div class="code-display-section" id="code-navigation-icons">
                    <pre><code>&lt;ons-icon icon="md-arrow-back" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-arrow-forward" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-chevron-left" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-chevron-right" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-chevron-down" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-chevron-up" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('navigation-icons')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <h3 class="section-title">操作图标</h3>
        <div class="example-container">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; text-align: center;">
                <div class="icon-item">
                    <ons-icon icon="md-edit" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-edit</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-delete" size="32px" style="color: #e74c3c;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-delete</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-save" size="32px" style="color: #27ae60;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-save</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-share" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-share</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-download" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-download</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-upload" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-upload</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-mail-send" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-mail-send</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-refresh" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-refresh</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-print" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-print</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-copy" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-copy</div>
                </div>
            </div>
            <div class="code-section" onclick="toggleSectionCode('action-icons')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-action-icons"></ons-icon>
                </div>
                <div class="code-display-section" id="code-action-icons">
                    <pre><code>&lt;ons-icon icon="md-edit" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-delete" size="32px" style="color: #e74c3c;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-save" size="32px" style="color: #27ae60;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-share" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-download" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-upload" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-mail-send" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-refresh" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-print" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-copy" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('action-icons')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <h3 class="section-title">内容图标</h3>
        <div class="example-container">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; text-align: center;">
                <div class="icon-item">
                    <ons-icon icon="md-email" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-email</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-phone" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-phone</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-camera" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-camera</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-image" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-image</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-videocam" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-videocam</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-audio" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-audio</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-folder" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-folder</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-attachment" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-attachment</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-link" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-link</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-calendar-note" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-calendar-note</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-time" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-time</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-pin" size="32px" style="color: #e74c3c;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-pin</div>
                </div>
            </div>
            <div class="code-section" onclick="toggleSectionCode('content-icons')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-content-icons"></ons-icon>
                </div>
                <div class="code-display-section" id="code-content-icons">
                    <pre><code>&lt;ons-icon icon="md-email" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-phone" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-camera" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-image" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-videocam" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-audio" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-folder" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-attachment" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-link" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-calendar-note" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-time" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-pin" size="32px" style="color: #e74c3c;"&gt;&lt;/ons-icon&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('content-icons')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <h3 class="section-title">社交图标</h3>
        <div class="example-container">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; text-align: center;">
                <div class="icon-item">
                    <ons-icon icon="md-thumb-up" size="32px" style="color: #3498db;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-thumb-up</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-thumb-down" size="32px" style="color: #e74c3c;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-thumb-down</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-comment" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-comment</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-comments" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-comments</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-accounts" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-accounts</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-account-add" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-account-add</div>
                </div>
            </div>
            <div class="code-section" onclick="toggleSectionCode('social-icons')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-social-icons"></ons-icon>
                </div>
                <div class="code-display-section" id="code-social-icons">
                    <pre><code>&lt;ons-icon icon="md-thumb-up" size="32px" style="color: #3498db;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-thumb-down" size="32px" style="color: #e74c3c;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-comment" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-comments" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-accounts" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-account-add" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('social-icons')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <h3 class="section-title">其他图标</h3>
        <div class="example-container">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; text-align: center;">
                <div class="icon-item">
                    <ons-icon icon="md-lock" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-lock</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-lock-open" size="32px" style="color: #27ae60;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-lock-open</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-eye" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-eye</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-eye-off" size="32px" style="color: #999;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-eye-off</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-help" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-help</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-info" size="32px" style="color: #3498db;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-info</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-alert-triangle" size="32px" style="color: #f39c12;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-alert-triangle</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-alert-circle" size="32px" style="color: #e74c3c;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-alert-circle</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-shopping-cart" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-shopping-cart</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-card" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-card</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-wifi" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-wifi</div>
                </div>
                <div class="icon-item">
                    <ons-icon icon="md-bluetooth" size="32px" style="color: #667eea;"></ons-icon>
                    <div style="font-size: 12px; margin-top: 8px; color: #666;">md-bluetooth</div>
                </div>
            </div>
            <div class="code-section" onclick="toggleSectionCode('other-icons')">
                <div class="code-section-header">
                    <span>查看代码示例</span>
                    <ons-icon icon="md-chevron-down" id="icon-other-icons"></ons-icon>
                </div>
                <div class="code-display-section" id="code-other-icons">
                    <pre><code>&lt;ons-icon icon="md-lock" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-lock-open" size="32px" style="color: #27ae60;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-eye" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-eye-off" size="32px" style="color: #999;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-help" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-info" size="32px" style="color: #3498db;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-alert-triangle" size="32px" style="color: #f39c12;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-alert-circle" size="32px" style="color: #e74c3c;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-shopping-cart" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-card" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-wifi" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;
&lt;ons-icon icon="md-bluetooth" size="32px" style="color: #667eea;"&gt;&lt;/ons-icon&gt;</code></pre>
                    <button class="section-copy-btn" onclick="event.stopPropagation(); copySectionCode('other-icons')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span>复制代码</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="success-box mt-30">
            <div style="display: flex; align-items: center;">
                <ons-icon icon="md-check-circle" style="color: #4caf50; font-size: 24px; margin-right: 12px;"></ons-icon>
                <div style="color: #2e7d32; line-height: 1.6;">
                    <strong>提示：</strong>所有图标都支持自定义大小和颜色，使用 size 和 style 属性即可
                </div>
            </div>
        </div>
    </div>
    
    <style>
        .icon-item {
            padding: 15px 10px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .icon-item:hover {
            background-color: #f5f7fa;
            transform: translateY(-2px);
        }
        
        .code-section {
            margin-top: 20px;
            cursor: pointer;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .code-section:hover {
            border-color: #667eea;
        }
        
        .code-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: #f8f9fa;
            font-weight: 500;
            color: #667eea;
        }
        
        .code-display-section {
            display: none;
            position: relative;
            background: #2d3748;
            padding: 16px;
        }
        
        .code-display-section.expanded {
            display: block;
        }
        
        .code-display-section pre {
            margin: 0;
            padding: 0;
            background: transparent;
        }
        
        .code-display-section code {
            color: #e2e8f0;
            font-size: 13px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
        }
        
        .section-copy-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #e2e8f0;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }
        
        .section-copy-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .section-copy-btn ons-icon {
            font-size: 16px;
        }
    </style>
    
    <script>
        // Toggle section code display
        function toggleSectionCode(sectionId) {
            var codeDisplay = document.getElementById('code-' + sectionId);
            var icon = document.getElementById('icon-' + sectionId);
            
            if (codeDisplay.classList.contains('expanded')) {
                codeDisplay.classList.remove('expanded');
                icon.setAttribute('icon', 'md-chevron-down');
            } else {
                codeDisplay.classList.add('expanded');
                icon.setAttribute('icon', 'md-chevron-up');
            }
        }
        
        // Copy section code
        function copySectionCode(sectionId) {
            var codeElement = document.querySelector('#code-' + sectionId + ' code');
            var text = codeElement.textContent;
            
            // Create temporary textarea
            var textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            
            try {
                document.execCommand('copy');
                ons.notification.toast('代码已复制到剪贴板', {
                    timeout: 2000,
                    animation: 'ascend'
                });
            } catch (err) {
                ons.notification.toast('复制失败，请手动复制', {
                    timeout: 2000
                });
            }
            
            document.body.removeChild(textarea);
        }
    </script>
</ons-page>
